<template>
	<view style="padding: 10rpx;">
		<view style="display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10rpx;">
			<view v-for="item in report" :key="item.id" style="padding: 10rpx; border-radius: 10rpx;"
				:class="item.class">
				<view class="flex-row items-center">
					<u-avatar :src="item.user.meta.avatar" :size="45"></u-avatar>
					<view style="padding: 5px; line-height: 32rpx;" class="flex-col ">
						<view>
							<text>{{item.user.nickname}}</text><text style="">({{getLevel(item.highestRole)}})</text>
						</view>
						<view style="font-size: 28rpx;padding: 10rpx 0;">{{item.user.mobile}}</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 		<u-loadmore :status="status" v-if="status=='loading'||report.length>0"></u-loadmore> -->
		<u-empty v-if="status=='nomore'&&report.length==0"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				report: {},
				totalPage: 0,
				pageSize: 30,
				curpage: 1,
				status: "loading",
				sData: [],
				allData: [],
			}
		},
		onLoad() {
			this.getInvitees()
		},
		onPullDownRefresh() {

			this.getInvitees()
		},
		onReachBottom() {
			if (this.curpage >= this.totalPage)
				return;
			this.curpage++;
			this.nextPage(this.sData, this.curpage)
		},
		methods: {
			getLevel(level) {
				return this.$Utils.getUserLevel(level)
			},
			sortByOrder(targetArray, orderArray) {
				// 创建顺序映射，提高查找性能
				const orderMap = new Map();
				orderArray.forEach((item, index) => {
					orderMap.set(item, index);
				});

				// 复制原数组以避免修改原数组，并进行排序
				return targetArray.slice().sort((a, b) => {
					// 获取元素在顺序数组中的索引，不存在则返回Infinity（排在最后）
					const indexA = orderMap.has(a.highestRole) ? orderMap.get(a.highestRole) : Infinity;
					const indexB = orderMap.has(b.highestRole) ? orderMap.get(b.highestRole) : Infinity;
					return indexA - indexB;
				});
			},
			getHeaderClass(roles) {
				if (roles == "AG_CSR" || roles == "AU_CSR") {
					return 'customer'
				} else if (roles == "AG_SHOP") {
					return 'shop'
				} else if (roles == "AU_SHOP") {
					return 'shop_g'
				} else if (roles == "AG_WHS") {
					return 'whs'
				} else if (roles == "AU_WHS") {
					return 'whs_g'
				} else if (roles == "AG_AGENT") {
					return 'agent'
				} else if (roles == "AU_AGENT") {
					return 'agent_g'
				} else if (roles == "MANAGER") {
					return 'manager'
				} else if (roles == "AG_DIRECTOR") {
					return 'manager1'
				} else if (roles == "AU_DIRECTOR") {
					return 'manager2'
				} else {
					return 'customer'
				}
			},

			getInvitees() {
				this.report = [];
				this.allData = [];
				this.curpage = 1;
				console.log(this.$Utils.ApiUrl)

				this.allData = [];
				this.status = 'loading';
				this.$get({
					url: `${this.$Utils.ApiUrl}/invitees`,
					data: this.searchForm
				}).then(res => {
					console.log(res);
					const orderArr = ['AU_DIRECTOR', 'AG_DIRECTOR', 'MANAGER', 'AU_AGENT', 'AG_AGENT', 'AU_WHS',
						'AG_WHS', 'AU_SHOP', 'AG_SHOP', 'AU_CSR', 'AG_CSR'

					]

					this.allData = this.sortByOrder(res, orderArr);
					for (let item of this.allData) {
						this.$set(item, 'class', this.getHeaderClass(item.highestRole))
					}
					this.sData = this.$Utils.copyObject(this.allData);
					this.totalPage = Math.ceil(res.length / this.pageSize);
					console.log(this.totalPage)
					this.nextPage(this.sData, this.curpage)
					uni.hideNavigationBarLoading()
				})
			},

			nextPage(data, page) {
				let startIdx = (page - 1) * this.pageSize;
				let endIdx = data.length
				//
				if (data.length - (page * this.pageSize) <= this.pageSize) {
					endIdx = data.length;
					this.status = 'nomore';
				} else {
					endIdx = page * this.pageSize
				}
				for (let i = startIdx; i < endIdx; i++) {
					let tmp = this.report.filter(x => {
						return x.id == data[i].id
					})
					if (tmp.length == 0) {
						this.report.push(data[i]);
					}

				}
			},
		}
	}
</script>

<style>
	.customer {
		background-color: #ffffff;
		color: #000;
	}


	.shop {
		background-color: #b3b6bd;
		color: #fff;
	}

	.shop_g {
		background-color: #ffe2c6;
		color: #000;
	}

	.agent {
		background-color: #d04436;
		color: #fff;
	}

	.agent_g {
		background-color: #d04436;
		color: #fff;
	}

	.whs {
		background-color: #da8c10;
		color: #fff;
	}

	.whs_g {
		background-color: #da8c10;
		color: #fff;
	}


	.manager {
		background-color: #9045ac;
		color: #fff;
	}

	.manager1 {
		background-color: #9045ac;
		color: #fff;
	}

	.manager2 {
		background-color: #9045ac;
		color: #fff;
	}
</style>